<template>
  <div class="body">
    <!-- 个人信息盒子 -->
    <div class="mine_box">
      <div class="title">我的</div>
      <!-- 个人简介 -->
      <div class="Biography">
        <img :src="'https://jingqu.kuxia.top' + data.img" alt="">
        <div>
          <b>{{ data.nickname }}</b>
          <p>推荐人：{{ data.name == null ? "无" : data.name }}</p>
        </div>
      </div>
      <!-- 简介 -->
      <div class="Introduction">
        <p>旅游达人</p>
        畅行一路通，出游最轻松
      </div>
    </div>

    <div class="grid">
      <div class="grid_item">
        <img src="../assets/browse.png" alt="">
        浏览记录
      </div>
      <div class="grid_item">
        <img src="../assets/prize.png" alt="">
        我的奖品
      </div>
      <div class="grid_item">
        <img src="../assets/massage.png" alt="">
        我的订单
      </div>
      <div class="grid_item">
        <img src="../assets/order.png" alt="">
        推广信息
      </div>
      <div class="grid_item" @click="targetPage">
          <img src="../assets/qr code.png" alt="">
          推广码
      </div>
    </div>
    <!-- 中间内容 -->
    <div class="grid_between">
      <div class="grid_between_item">
        <div>
          <strong>我的团队</strong>
          <p>0</p>
        </div>
        <img src="../assets/group.png" alt="">
      </div>
      <div class="grid_between_item">
        <div>
          <strong>我的团队</strong>
          <p>0</p>
        </div>
        <img src="../assets/income.png" alt="">
      </div>
    </div>
    <!-- 其他服务 -->
    <div class="rest_grid">
      <div class="rest_grid_title">其他服务</div>
      <div class="rest_grid_row">
        <!-- 单个的服务 -->
        <div class="rest_grid_item">
          <img src="../assets/collect.png" alt="">
          <p>收藏记录</p>
        </div>
        <div class="rest_grid_item">
          <img src="../assets/Thumbs.png" alt="">
          <p>点赞记录</p>
        </div>
        <div class="rest_grid_item">
          <img src="../assets/Customer.png" alt="">
          <p>在线客服</p>
        </div>
        <div class="rest_grid_item">
          <img src="../assets/Real name.png" alt="">
          <p>实名认证</p>
        </div>
      </div>
      <div class="rest_grid_row">
        <!-- 单个的服务 -->
        <div class="rest_grid_item">
          <img src="../assets/cancel.png" alt="">
          <p>已取消</p>
        </div>
        <div class="rest_grid_item">
          <img src="../assets/payment.png" alt="">
          <p>已付款</p>
        </div>
        <div class="rest_grid_item">
          <img src="../assets/drawback.png" alt="">
          <p>已退款</p>
        </div>
        <div class="rest_grid_item">
          <img src="../assets/appraise.png" alt="">
          <p>待评价</p>
        </div>
      </div>
    </div>
    <div class="scenic_title">
      <strong>我的攻略</strong>
      <div>查看全部<img src="../assets/arrows.png" alt=""></div>
    </div>
    <div class="scenic_box">
      <!-- 单个景区的详情的盒子 -->
      <div class="scenic_details" v-for="(item, index) in StrategyData" :key="item.id">
        <img :src="'https://jingqu.kuxia.top' + item.img" alt="">
        <div class="scenic_info">
          <!-- 景区名称 -->
          <div class="scenic_name">
            {{ item.name }}
          </div>
          <!-- 底部的操作 -->
          <div class="operate">
            <!-- 头像 -->
            <div class="avatar">
              <img :src="'https://jingqu.kuxia.top' + item.img" alt="">
            </div>
            <div class="like">
              <img src="../assets/likeyou.png" alt="">
              {{ item.like_num == null ? '0' : item.like_num > 999 ? "999+" : item.like_num }}
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 暂无提示 -->
    <div class="not_yet">
      没有更多了…
    </div>
    <div class="Bottom_navigation">
      <!-- 底部单个选项 -->
      <div class="bottom_single_option">
        <router-link to="/">
          <img src="../assets/bottom_home.png" alt="">
          <p>首页</p>
        </router-link>
      </div>
      <!-- 底部单个选项 -->
      <div class="bottom_single_option">
        <router-link to="strategy">
          <img src="../assets/local_florist.png" alt="">
          <p>攻略</p>
        </router-link>
      </div>
      <!-- 底部单个选项 -->
      <div class="bottom_single_option">
        <div class="publish">
          <img src="../assets/plane.png" alt="">
        </div>
        <img src="" alt="">
        <p>发布</p>
      </div>
      <!-- 底部单个选项 -->
      <div class="bottom_single_option">
        <img src="../assets/scenic.png" alt="">
        <p>排行榜</p>
      </div>
      <!-- 底部单个选项 -->
      <div class="bottom_single_option active">
        <router-link to="mine">
          <img src="../assets/account_circle.png" alt="">
          <p>我的</p>
        </router-link>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import { StrategyIndex } from '../api/scenic.js';
import router from "@/router/index.js";
const StrategyData = ref(null);
StrategyIndex({ scenic_id: 2 }).then(function (res) {
  console.log(res); // 成功回调
  StrategyData.value = res.data;
});
const data = JSON.parse(sessionStorage.getItem('user'));
const targetPage = () =>{
  router.push({
    path: '/PromoCode',
  });
}
</script>

<style scoped>
.body {
  width: 100%;
  height: 100%;
  background-color: #E9ECF4;
}

.title {
  font-weight: 600;
  text-align: center;
}

/* 顶部个人信息 */
.mine_box {
  width: 100%;
  height: 300px;
  background-image: url("../assets/mine_back.jpg");
  background-repeat: no-repeat;
  background-size: 100%;
}

/* 个人信息框架 */
.Biography {
  width: 100%;
  height: 40%;
  display: flex;
  align-items: center;
  line-height: 25px;
  font-size: 12px;
}

/* 头像大小 */
.Biography img {
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background-color: aqua;
  margin: 5%;
}

.Introduction {
  padding-left: 10%;
  font-size: 12px;
}

.Introduction p {
  font-size: 14px;
  font-weight: 600;
}

/* 选项 */
.grid {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-around;
  background-color: white;
  border-radius: 5px 5px;
}

.grid_item {
  width: 19%;
  height: 100px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  color: #666666;
}

.grid_item img {
  width: 35px;
  height: 35px;
  text-align: end;
  margin-bottom: 5px;
}

.grid_between {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-around;
}

.grid_between_item {
  margin: 1%;
  margin-top: 2%;
  width: 48%;
  display: flex;
  align-items: center;
  justify-content: space-around;
  text-align: center;
  background-color: white;
  border-radius: 5px 5px;
  line-height: 30px;
}

.grid_between_item img {
  width: 50px;
}

.rest_grid {
  width: 98%;
  padding: 2%;
  margin: 1%;
  border-radius: 5px;
  background-color: white;
}

/* 其他服务 */
.rest_grid_title {
  width: 100%;
  padding-left: 10px;
  margin: 5px 0px;
}

.rest_grid_row {
  margin-top: 15px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-around;
}

.rest_grid_item {
  text-align: center;
  width: 20%;
  font-size: 11px;
}

.rest_grid_item img {
  width: 45%;
}


/* 景区的盒子 */
.scenic_box {
  width: 100%;
  column-count: 2;
  column-gap: 5px;
  padding: 0px 5px;
  margin-bottom: 8px;
}

/* 单个景区的详情的盒子 */
.scenic_details {
  width: 100%;
  background-color: white;
  margin-top: 5px;
  border-radius: 8px;
  box-shadow:
    3px 3px 5px rgba(0, 0, 0, 0.2),
    inset -2px -2px 5px rgba(255, 255, 255, 0.5);
  display: inline-block;
  /* 解决多列布局的怪异模式 */
  vertical-align: top;
  /* 对齐顶部 */
}

.scenic_details img {
  width: 100%;
  border-radius: 8px 8px;
}

/* 底部信息 */
.scenic_info {
  width: 100%;
  padding: 0px 3px;
}

.operate {
  padding: 0px 3px;
  display: flex;
  margin-bottom: 3px;
  align-items: center;
  justify-content: space-between;
}

.line {
  width: 0.1px;
  height: 18px;
  margin: 0px 5px;
  background-color: black;
}

.like {
  display: flex;
  align-items: center;
}

.like img {
  width: 15px;
  height: 15px;
}

.grade {
  display: flex;
}

/* 头像 */
.avatar {
  width: 25px;
  height: 25px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.avatar img {
  width: 100%;
  height: 100%;
}

.scenic_title {
  padding-left: 5px;
  margin-top: 8px;
  display: flex;
  font-size: 14px;
  align-items: center;
  justify-content: space-between;
  border-radius: 8px 8px 0px 0px;
  background-color: white;
}

.scenic_title img {
  width: 12px;
  margin: 0px 5px;
}
</style>